<template>
  <div class="bg">
    <div class="hr"></div>
    <div class="main">
      <ul class="main-list" v-for="(item,index) in addList">
        <li>
          <span class="mg-rt">{{item.name}}</span><span>{{item.phone}}</span>
        </li>
        <li class="main-list-md">
          {{item.add}}
        </li>
        <li class="main-list-ft" >
          <input type='radio'  :checked='isRadio' hidden>
          <div class='input-radio' @click='radioClick'>
            <icon type="success" color="#E93B3D" size="24" :hidden="!isRadio"/>
            <icon type="circle" color="#999" size="24" :hidden="isRadio"/>
            <span>设为默认地址</span>
          </div>
          <div class="main-list-ft-rt">
            <span class="add-icon"><span class="icon iconfont icon-bianji"></span>编辑</span>
            <span class="add-icon"><span class="icon iconfont icon-shanchu"></span>删除</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="foot">
      <button class="btn" type="warn" @click="warn"> + 添加收货地址 </button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isRadio: 0,
      addList: [
        {
          name: '李白',
          phone: '18072913679',
          add: '上海市 上海市 黄浦区 1087'
        },
        {
          name: '李白',
          phone: '18072913679',
          add: '上海市 上海市 黄浦区 1087'
        },
        {
          name: '李白',
          phone: '18072913679',
          add: '上海市 上海市 黄浦区 1087'
        },
        {
          name: '李白',
          phone: '18072913679',
          add: '上海市 上海市 黄浦区 1087'
        }
      ]
    }
  },
  computed: {

  },
  methods: {
    radioClick () {
      this.isRadio = !this.isRadio
    }
  },
  mounted () {
  }

}
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .bg{
    height: 100vh;
    background: #f8f8f8;
    .hr{
      width: 750rpx;
      height: 20rpx;
      background: #f8f8f8;
    }
    .main{
      height: calc(100vh - 112rpx);
      font-size: 28rpx;
      overflow-y: scroll;
      .main-list{
        padding: 10rpx 30rpx;
        background: #fff;
        margin-bottom: 20rpx;
        .mg-rt{
          margin-left: 10rpx;
          margin-right: 50rpx;
        }
        .main-list-md{
          padding-left: 10rpx;
          padding-bottom: 10rpx;
          color: #999;
          border-bottom: 1rpx solid #D7D6DC;
        }
        .main-list-ft{
          display: flex;
          flex-direction: row;
          padding-top: 10rpx;
          height: 60rpx;
          color: #999;
          align-items: center;
          .input-radio{
            display: flex;
            align-items: center;
            span{
              margin-left: 10rpx;
            }
          }
          .main-list-ft-rt{
            flex-grow: 1;
            display: flex;
            flex-direction: row;
            justify-content: flex-end;
            .add-icon{
              margin-right: 10rpx;
              &:active{
                color: #E93B3D;
              }
            }
          }
        }
      }
    }
    .foot{
      button.btn{
        border-radius: 0;
      }
    }
  }
</style>
